{% extends "base.html" %}
{% block main %}
<div class="container" id="show-images">
    <div class="row">
        {% for image in images %}
        <div class="col s12 m6 l4 xl3">
            <div class="card hoverable">
                <div class="card-image">
                    <img src="{{ image.image.url }}">
                    <a class="btn-floating halfway-fab waves-effect waves-light teal lighten-1" href="{{ image.image.url }}" download>
                        <i class="material-icons">cloud_download</i>
                    </a>
                </div>
                <div class="card-content">
                    <span class="card-title activator grey-text text-darken-4">Detail<i class="material-icons right">more_vert</i></span>
                </div>
                <div class="card-reveal">
                    <span class="card-title grey-text text-darken-4">详细信息<i class="material-icons right">close</i></span>
                    <p>上传者: {{ image.username}}</p>
                    <p>上传时间: {{ image.upload_time }}</p>
                    <p>图片大小: {{ image.image.size|filesizeformat }}</p>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}

{% block js %}
<script type="text/javascript" charset="UTF-8">

</script>
{% endblock %}